<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>管理员</title>

    <script src="js/global_data.js"></script>
    <!-- 以下为bootstrap和jquery相关依赖-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/jquery-3.4.1.min.js"></script>
    <!-- *************************************************************up-up-->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <link rel="stylesheet" href="css/superUser.css">
</head>

<body class="container-fluid">
<div id="appOne">


<div id="headBox" class="row">
    <div class="col-md-3"></div>
    <span class="glyphicon glyphicon-user col-md-1"></span>
    <p class="col-md-2">管理员平台</p>
</div>
<div class="row" style="background-color: #F0F0F0;height: 650px;">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <div style="background-color: white;" id="mainBox">
            <h4>我的应用</h4>
            <div class="row-line"></div>
            <div class="functionBox col-md-3">
                <div class="functionBox-boll">
                    <img class="functionBox-icon" src="icon/match.png">
                </div>
                <p class="functionBox-title">赛事</p>
            </div>

            <div class="functionBox col-md-3">
                <div class="functionBox-boll" style="background-color: #3D64E0">
                    <img class="functionBox-icon" src="icon/user.png">
                </div>
                <p class="functionBox-title">用户管理</p>
            </div>

            <div class="functionBox col-md-3">
                <div class="functionBox-boll" style="background-color: #E77E23">
                    <div>
                        <div class="daixu-boll" style="left: 45px;"></div>
                        <div class="daixu-boll" style="left: 65px;"></div>
                        <div class="daixu-boll" style="left: 85px;"></div>
                    </div>
                </div>
                <p class="functionBox-title">待开发</p>
            </div>
        </div>
    </div>
</div>


<div hidden="hidden">
    <div style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; background-color: black; opacity: 0.4;"></div>
    <div id="matchBox">
        <img src="icon/close.png">
        <ul class="nav nav-pills">
            <li role="presentation" class="active"><a>所有比赛</a></li>
            <li role="presentation"><a>我的比赛</a></li>
            <li role="presentation"><a>创建比赛</a></li>
        </ul>
        <table class="table table-bordered">
            <tr class="matchBox-title">
                <td>管理员</td>
                <td>比赛标题</td>
                <td>比赛类型</td>
                <td>创建时间</td>
                <td>报名截止日期</td>
                <td>状态</td>
            </tr>

            <tr v-for="map in matches" class="matchBox-value">
                <td>{{map["createUser"]}}</td>
                <td>{{map["title"]}}</td>
                <td>{{map["type"]}}</td>
                <td>{{map["createTime"]}}</td>
                <td>{{map["endTime"]}}</td>
                <td>{{map["result"]}}</td>
            </tr>
        </table>

        <table class="table table-bordered" hidden="hidden">
            <tr class="matchBox-title">
                <td>比赛标题</td>
                <td>比赛类型</td>
                <td>创建时间</td>
                <td>报名截止日期</td>
                <td>当前人数</td>
                <td>状态</td>
            </tr>

            <tr class="matchBox-value" v-for="map in matches" v-if="map['createUser'] == user">
                <td>{{map["title"]}}</td>
                <td>{{map["type"]}}</td>
                <td>{{map["createTime"]}}</td>
                <td>{{map["endTime"]}}</td>
                <td>{{map["nowNumber"]}} / {{map["userNumber"]}}</td>
                <td>{{map["result"]}}</td>
                <td hidden="hidden">{{map["id"]}}</td>
            </tr>
        </table>

        <div id="createMatch" hidden="hidden">
            <div style="display: flex;">
                <span class="createMatch-span">比赛标题：</span>
                <input type="text" class="form-control createMatch-input" />
            </div>
            <div style="width: 100%; height: 20px;"></div>
            <div style="display: flex">
                <span class="createMatch-span">参赛人数：</span>
                <input type="text" placeholder="1~20人" class="form-control createMatch-input" />
            </div>
            <div style="width: 100%; height: 20px;"></div>
            <div style="display: flex">
                <span class="createMatch-span">比赛类型：</span>
                <select class="form-control" style="width: 20%;">
                    <option>循环赛</option>
                    <option>淘汰赛</option>
                    <option>小组赛</option>
                </select>
            </div>
            <div style="width: 100%; height: 20px;"></div>
            <div style="display: flex;">
                <span class="createMatch-span">报名截止日期：</span>
                <input type="date" placeholder="1~20人" class="form-control createMatch-input" />
            </div>
            <div style="width: 100%; height: 20px;"></div>
            <div style="display: flex;">
                <span class="createMatch-span">比赛简介：</span>
                <textarea class="form-control" style="width: 70%;"></textarea>
            </div>
            <div style="display: flex;width: 100%;justify-content: center;">
                <button class="btn btn-warning">提交</button>
            </div>
        </div>

    </div>
</div>

<div hidden="hidden">
    <div style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; background-color: black; opacity: 0.4;"></div>
    <div id="changeDate">
        <h4>请选择新的报名截止日期</h4>
        <input type="date" class="form-control">
        <button class="btn btn-info">提交</button>
    </div>
</div>

</div>
</body>
</html>
<script src="js/superUser.js"></script>
<script>
    // 判断用户有没有管理员权限，没有的话自动登录跳转到登录页面
    $.ajax({
        async: false,
        type: "post",
        data:'{"userToken":"'+localStorage.getItem("superUserToken")+'"}',
        url: serverIpAddress+"User/LodeUserMessage",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        error:function () {
            window.location="login.html";
        }
    });

    let app = new Vue({
        el: '#appOne',
        data: {
            matches: {},
            user: ''
        },
        mounted: async function () {
            this.matches = await this.loadData();
            this.user = this.matches.user;
            this.matches = this.matches.matches;
            this.$nextTick(function () {
                LodePage();
            })
        },
        methods: {
            async loadData() {
                let postData = {}
                postData["userToken"] = localStorage.getItem("superUserToken");
                const res = await axios.post(serverIpAddress+"SuperUser/superUserMessage",postData);
                return res.data;
            }
        }
    })
</script>
